﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>制造日历维护</title>
	<meta charset="utf-8" />
    <script type="text/javascript" src="/MESShopfloor/Scripts/json2.js"></script>

    <!--layui-->
    <link href="/MESShopfloor/Content/layui/css/layui.css" rel="stylesheet" />
    
    <script src="/MESShopfloor/Content/Easyui/jquery.min.js" type="text/javascript"></script>
    <script src="/MESShopfloor/Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/MESShopfloor/Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="/MESShopfloor/Content/Easyui/themes/metro/easyui.css" rel="stylesheet" />
    <link href="/MESShopfloor/Content/Easyui/themes/icon.css" rel="stylesheet" />

    <link href="/MESShopfloor/Content/Easyui/custom-easyui.css" rel="stylesheet" /><!--定制化easyui样式-->

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="/MESShopfloor/Content/html5.min.js"></script>
      <script src="/MESShopfloor/Content/respond.min.js"></script>
    <![endif]-->


    <style>
        .calendar-selected {
            background-color: #fff;
            color: #000;
            border: 1px solid #fff;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="layui-row layui-col-space10" style="margin:0 10px">

        <div class="layui-col-md2" style="">
            <div style="position:relative;height:36px">
                <div style="float:left;width:50px;line-height:36px">年份</div>
                <div style="overflow: hidden;">
                    <input type="text" class="layui-input" id="yearChoose">
                </div>
            </div> 
            <div style="margin-top:10px">
                <a href="#" id="btnBatchSet" class="easyui-linkbutton" data-options="" onclick="saveMakeCalendars(0)" style="">周六批量设定</a>
                <a href="#" id="btnBatchSet2" class="easyui-linkbutton" data-options="" onclick="saveMakeCalendars(1)" style="margin-left:20px">周日批量设定</a>
            </div> 
        </div>
        <div id="dvCalendarArea" class="layui-col-md10" style="border-left:1px solid #ccc">


            <div class="layui-row layui-col-space20">
                <div class="layui-col-md3" style="height:300px">
                    <div id="cc" class="easyui-calendar" data-options="month:1" style="width:100%;height:100%;"></div>
                </div>
                <div class="layui-col-md3" style="height:300px">
                    <div class="easyui-calendar" data-options="month:2" style="width:100%;height:100%;"></div>
                </div>
                <div class="layui-col-md3" style="height:300px">
                    <div class="easyui-calendar" data-options="month:3" style="width:100%;height:100%;"></div>

                </div>
                <div class="layui-col-md3" style="height:300px">

                    <div class="easyui-calendar" data-options="month:4" style="width:100%;height:100%;"></div>
                </div>
            </div>

            <div class="layui-row layui-col-space20">
                <div class="layui-col-md3" style="height:300px">
                    <div id="cc" class="easyui-calendar" data-options="month:5" style="width:100%;height:100%;"></div>
                </div>
                <div class="layui-col-md3" style="height:300px">
                    <div class="easyui-calendar" data-options="month:6" style="width:100%;height:100%;"></div>
                </div>
                <div class="layui-col-md3" style="height:300px">
                    <div class="easyui-calendar" data-options="month:7" style="width:100%;height:100%;"></div>

                </div>
                <div class="layui-col-md3" style="height:300px">

                    <div class="easyui-calendar" data-options="month:8" style="width:100%;height:100%;"></div>
                </div>
            </div>

            <div class="layui-row layui-col-space20">
                <div class="layui-col-md3" style="height:300px">
                    <div id="cc" class="easyui-calendar" data-options="month:9" style="width:100%;height:100%;"></div>
                </div>
                <div class="layui-col-md3" style="height:300px">
                    <div class="easyui-calendar" data-options="month:10" style="width:100%;height:100%;"></div>
                </div>
                <div class="layui-col-md3" style="height:300px">
                    <div class="easyui-calendar" data-options="month:11" style="width:100%;height:100%;"></div>

                </div>
                <div class="layui-col-md3" style="height:300px">

                    <div class="easyui-calendar" data-options="month:12" style="width:100%;height:100%;"></div>
                </div>
            </div>

        </div>

    </div>


    <div id="dd" style="display:none">
        <form id="ff" method="post" >
            <table style="">
                <tr style="">
                    <td align="right" width="100">日期：</td>
                    <td style="padding:10px 0"><input class="easyui-textbox" id="popStartDate" type="text" name="startDate" data-options="required:false,readonly:true" style="width:150px;" /></td>
                </tr>
                <tr style="">
                    <td align="right" width="100">持续天数：</td>
                    <td style="padding:10px 0"><input class="easyui-numberbox" id="popContinueDay" type="number" name="continueDay" data-options="min:1,value:1" style="width:150px;" /></td>
                </tr>
                <tr style="">
                    <td align="right" width="100">假期名称：</td>
                    <td style="padding:10px 0">
                        <input class="easyui-textbox" id="popHolidayName" type="text" name="holidayName" data-options="required:false" style="width:250px;" />
                        <input id="hdCalendarIndex" name="CalendarIndex" type="hidden" /><input id="hdMakeCalendarID" name="MakeCalendarID" type="hidden" />
                    </td>
                </tr>
            </table>

        </form>
    </div>

    <script src="/MESShopfloor/Content/layui/layui.js" type="text/javascript"></script>
    <script src="/MESShopfloor/Scripts/bw/bwCommon.js" type="text/javascript"></script>

    <script>
        var layer = null;
        layui.use('layer', function () {
            layer = layui.layer;            
        });
       
        layui.use('laydate', function () {           

          var laydate = layui.laydate;
          //执行一个laydate实例
          laydate.render({
              elem: '#yearChoose' //指定元素
               , type: 'year'
              , value: new Date()
              , btns: ['clear', 'confirm']
              , change: function (value, date, endDate) {
                 // console.log(value); //得到日期生成的值，如：2017-08-18
                //  console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                  //console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
              }
              , done: function (value, date, endDate) {
                  if (value == '' || value == null) {
                      return;
                  }
                  initCalendars(value);
                  return;
                  console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                  console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
              }
          });
        });
    </script>
    <script type="text/javascript">
        //打开明细框
        function openDetail(param) {
            $('#dd').dialog({
                title: '假期',
                width: 400,
                height: 250,
                closed: false,
                cache: false,
                href: '',
                modal: true,
                onOpen: function () {
                    if (param != null) {
                        //prompt("", param.startDate);
                        //请求数据若存在假期直接显示
                        var loadIndex = null;

                        $.ajax({
                            type: "POST",
                            url: "/MESShopfloor/Ashx/BwMakeCalendar.ashx",
                            data: { HolidayDate: param.startDate, action: "GetMakeCalendarByHolidayDate" },
                            cashe: false,
                            beforeSend: function () {
                                if (layer != null)
                                    loadIndex = layer.load(2);
                            },
                            success: function (result) {
                                if (layer != null)
                                    layer.close(loadIndex);
                                var re = JSON.parse(result);
                                if (re.length > 0)
                                {
                                    $("#popContinueDay").textbox('setValue', re[0].CONTINUEDAY);
                                    $("#popHolidayName").textbox('setValue', re[0].HOLIDAYNAME);
                                    $("#hdMakeCalendarID").val(re[0].BWMAKECALENDARID);

                                }else
                                    $("#popContinueDay").textbox('setValue', 1);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                /*错误信息处理*/
                                alert(jqXHR.statusText);
                                if (layer != null)
                                    layer.close(loadIndex);
                            }
                        });
                        $("#hdCalendarIndex").val(param.index);
                        $("#popStartDate").textbox('setValue', param.startDate);
                        //$("#popContinueDay").textbox('setValue', 1);
                    }
                },
                buttons:[{
                    text:'确定',
                    handler: function () {
                        saveHolidayInfo();
                    }
                },{
                    text:'删除',
                    handler: function () {
                        deleteHoliday();
                    }
                }],
                onBeforeClose: function () {
                    $('#ff').form('clear');
                }
            });//.dialog('open');
        }
        //初始化日历信息
        function initCalendars(year) {
            //查询假期信息
            var loadIndex = null;

            $.ajax({
                type: "POST",
                url: "/MESShopfloor/Ashx/BwMakeCalendar.ashx",
                data: { Year: year, action: "GetHolidayInfo" },
                cashe: false,
                beforeSend: function () {
                    if (layer!=null)
                        loadIndex = layer.load(2);
                },
                success: function (result) {
                    if (layer != null)
                        layer.close(loadIndex);

                    var holidays = JSON.parse(result);
                    //prompt("", holidays[0].HOLIDAYDATE);
                    
                    $.each($("#dvCalendarArea .easyui-calendar"), function (i, val) {

                        $(val).parent().width();
                        $(val).calendar({
                            month: i + 1,
                            year: year
                            // , width: $(val).parent().width()
                            , onSelect: function (date) {
                                //alert(date.getFullYear() + "-" + date.getMonth()+"-"+date.getDate());
                                var param = {};
                                param.startDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                                param.index = i;
                                openDetail(param);
                            }
                            , formatter: function (date) {

                                var month = date.getMonth() + 1;
                                var da = date.getDate();
                                
                                var strDate = date.getFullYear() + "-" + (month < 10 ? "0" + month.toString() : month) + "-" + (da < 10 ? "0" + da.toString() : da);
                                strDate += "T00:00:00";

                                var t=judgeValueOfJsons(holidays, "HOLIDAYDATE", strDate);
                                if (t) {                                    
                                    return '<div style="background-color:#D6F1FF">' + date.getDate() + '</div>';
                                }
                                return date.getDate();
                            }
                        });
                    });

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    /*错误信息处理*/
                    alert(jqXHR.statusText);
                    if (layer != null)
                        layer.close(loadIndex);
                }
            });


        }
        
        //刷新某个日历
        function refrehCalendar(index) {
           
            var c = $("#dvCalendarArea .easyui-calendar")[index];
            var opts = $(c).calendar('options');
            var month = opts.month, year = opts.year;

            //请求这个日历的假期信息
            var loadIndex = null;
            $.ajax({
                type: "POST",
                url: "/MESShopfloor/Ashx/BwMakeCalendar.ashx",
                data: { Year: year, Month: (month < 10 ? "0" + month : month), action: "GetHolidayInfo" },
                cashe: false,
                beforeSend: function () {
                    if (layer != null)
                        loadIndex = layer.load(2);

                },
                success: function (result) {
                    if (layer != null)
                        layer.close(loadIndex);

                    var holidays = JSON.parse(result);
                    $(c).calendar({
                        month: month,
                        year: year
                        //, onSelect: function (date) {
                        //    //alert(date.getFullYear() + "-" + date.getMonth()+"-"+date.getDate());
                        //    var param = {};
                        //    param.startDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                        //    openDetail(param);
                        //}
                          , formatter: function (date) {

                              var month = date.getMonth() + 1;
                              var da = date.getDate();

                              var strDate = date.getFullYear() + "-" + (month < 10 ? "0" + month.toString() : month) + "-" + (da < 10 ? "0" + da.toString() : da);
                              strDate += "T00:00:00";

                              var t = judgeValueOfJsons(holidays, "HOLIDAYDATE", strDate);
                              if (t) {
                                  return '<div style="background-color:#D6F1FF">' + date.getDate() + '</div>';
                              }
                              return date.getDate();
                          }
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    /*错误信息处理*/
                    alert(jqXHR.statusText);
                    if (layer != null)
                        layer.close(loadIndex);
                }
            });


        }

        //定制化日历信息
        function customCalendars() {
            //定制化日期控件
            $.each($(".easyui-calendar .calendar-header"), function (i, val) {
                // $(val).text("123");
                $(val).find(" .calendar-nav").attr("class", "calendar-nav");
                $(val).find(".calendar-title").on('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                });
            })
        }
        //提交数据
        function saveHolidayInfo() {
           
            var param = $("#ff").parseForm();
            param.action = "SaveHolidayInfo";
            if (isNullOrWhiteSpaceStr(param.holidayName)) {
                DisplayMessage(false,"请输入假期名称");
                return;
            }

            var loadIndex = null;
           
            $.ajax({
                type: "Post",
                url: "/MESShopfloor/Ashx/BwMakeCalendar.ashx",
                // contentType: "application/json",
                //dataType: "json",
                data: param,
                cashe: false,
                beforeSend: function () {
                    loadIndex= layer.load(2);
                },
                success: function (data) {
                    layer.close(loadIndex);
                    var re = JSON.parse(data);
                    DisplayMessage(re.IsSuccess, re.Message);
                    if (re.IsSuccess) {
                        $("#dd").dialog('close');
                        refrehCalendar(param.CalendarIndex);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.close(loadIndex);
                    alert(XMLHttpRequest.responseText);
                }

            });
        }

        //批量存储，周六或周天 0；周六 1：周天
        function saveMakeCalendars(type) {
            var year = $("#yearChoose").val();
            var param = {};
            var holidays = [];
            if (type == 0) {
                $.each($("#dvCalendarArea .calendar-saturday").not(".calendar-other-month"), function (i, val) {
                    holidays.push($(val).attr("abbr").replace(/,/g, "-"));
                });
            }else if(type==1){
                $.each($("#dvCalendarArea .calendar-sunday").not(".calendar-other-month"), function (i, val) {
                    holidays.push($(val).attr("abbr").replace(/,/g, "-"));
                });
            }
            param.HolidayDates =encodeURI(holidays);
            param.HolidayName = "周末假期";
            param.action = "SaveMakeCalendars";

            //return;
            var loadIndex = null;

            $.ajax({
                type: "Post",
                url: "/MESShopfloor/Ashx/BwMakeCalendar.ashx",
                // contentType: "application/json",
                //dataType: "json",
                data: param,
                cashe: false,
                beforeSend: function () {
                    loadIndex = layer.load(2);
                },
                success: function (data) {
                    layer.close(loadIndex);
                    var re = JSON.parse(data);
                    DisplayMessage(re.IsSuccess, re.Message);
                    if (re.IsSuccess) {
                        $("#dd").dialog('close');
                        initCalendars(year);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.close(loadIndex);
                    alert(XMLHttpRequest.responseText);
                }

            });
        }

        //删除假期
        function deleteHoliday() {
            var param = $("#ff").parseForm();
            param.action = "DeleteHoliday";


            if (isNullOrWhiteSpaceStr(param.MakeCalendarID)==false) {
                var loadIndex = null;

                $.ajax({
                    type: "Post",
                    url: "/MESShopfloor/Ashx/BwMakeCalendar.ashx",
                    // contentType: "application/json",
                    //dataType: "json",
                    data: param,
                    cashe: false,
                    beforeSend: function () {
                        loadIndex = layer.load(2);
                    },
                    success: function (data) {
                        layer.close(loadIndex);
                        var re = JSON.parse(data);
                        DisplayMessage(re.IsSuccess, re.Message);
                        if (re.IsSuccess) {
                            $("#dd").dialog('close');
                            refrehCalendar(param.CalendarIndex);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.close(loadIndex);
                        alert(XMLHttpRequest.responseText);
                    }

                });

            }
        }

        $(function () {

        var d = new Date();
        initCalendars(d.getFullYear());
        customCalendars();
        // openDetail();
    })
    </script>
</body>
</html>
